<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  const box = document.querySelector(".box");

  // 用于存储计时器的标志
  let t;
  // 目标值
  const target = 302;
  // 步长
  let speed = 5;

  document.onclick = function(){
    if(t) return;
    t = setInterval(()=>{
      // 剩下的距离，不足一步
      if(target - box.offsetLeft < speed ){
        // 强行将元素设置到终点
        box.style.left = target + "px";
        // 停止计时器
        clearInterval(t);
        t = undefined;
      }else{
        // 正常改变元素位置（运动过程...）
        box.style.left = box.offsetLeft + speed + "px";
      }
    }, 30);
  }

  // 1. 运动的元素：box
  // 2. 步长：一步走多远：1px
  // 3. 频率：每个单位时间是多少：30ms

  // DOM动画，建议频率30ms左右
  // 一秒能识别24张图片
  // 1000/24 约等于 41
  // 考虑DOM性能的情况下，取值为30ms
  


</script>
</html>